import type { ColorfulBadgeMorePropsType } from './typings'
import { keys } from 'lodash'
import styles from './index.module.scss'

export default function CustomColors(props: ColorfulBadgeMorePropsType) {
  const { class: className, value, enumKey, options } = props

  const iconType = (): string =>
    keys(options)?.find(
      (item: keyof ColorfulBadgeMorePropsType['options']) =>
        options!?.[item] === enumKey || (options!?.[item] as string[]).includes(enumKey)
    )

  return (
    <span class={className}>
      <i class={{ [styles['colorful-badge-icon']]: true, [styles[iconType()]]: true }} />
      <span>{value}</span>
    </span>
  )
}
